<template>
    <view class="index">
        <view class="new_box" style="margin-top: 20upx;">
            <view class="bbox">
                <view class="list-box" v-for="item in activities" :key="item.id">
                    <view class="list-ed">
                        <image class="list-img" @click="goDetail(item)"
                            :src="`/gongyi/common/download?name=${item.picture}`" mode="aspectFill">
                        </image>
                        <view class="list-right">
                            <view class="list-head" @click="choice(item)">
                                <view v-if="item.userId != userInfo.id" :class="[judge(item)?'selde':'noselde']">
                                    {{judge(item)?"已报名":"报名"}}<text :class="[judge(item)?'selde-q':'noselde-q']"></text>
                                </view>
                                <text v-if="item.userId == userInfo.id"
                                    style="display:inline-flex;padding: 0upx 0upx 0upx;lihe-height: 1.6;color: #fa436a;font-size: 24upx;">我发布的的活动</text>
                            </view>
                            <view class="list-name">{{item.activityName}}</view>
                            <view class="list-da">时间：<text>{{item.beginTime}}~{{item.endTime}}</text></view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                activities: [],
                userInfo: {},
                isSign: false,
                selectId: [],
            };
        },
        onLoad() {
            this.userInfo = uni.getStorageSync("user");
            // console.log(uni.getStorageSync("user").id)
            this.showBriefActivity();
            // uni.getStorage({
            //     key: 'user',
            //     success(res) {
            //         this.userInfo = res.data;
            //         // console.log("this.user : ", this.user.id);
            //     }
            // })
        },
        methods: {
            judge(item) {
                this.isSign = false;
                // console.log(this.userInfo)
                if (item.isSign != undefined || item.userId == this.userInfo.id) {
                    this.isSign = true;
                    if (item.userId == this.userInfo.id) {
                        this.isPubed = true;
                    }
                    return true;
                } else {
                    return false;
                }
            },
            async showBriefActivity() {
                console.log(this.userInfo);
                await uni.request({
                    url: '/gongyi/activity/getBriefInformation?id=' + this.userInfo.id,
                    method: 'GET',
                    success: res => {
                        this.activities = res.data.activities
                        // console.log(this.userInfo.id)
                    }
                })
            },
            //选择课程
            choice(item) {
                if (item.isSign == undefined) {
                    uni.navigateTo({
                        url: "/pages/fabu/more-activity/baoming/baoming?id=" + item.id + "&tag=1"
                    })
                } else {
                    uni.showModal({
                        title: "提示",
                        content: "取消报名？",
                        success: async (res) => {
                            if (res.confirm) {
                                await uni.request({
                                    url: '/gongyi/user/signOutActivity',
                                    method: 'POST',
                                    header: {
                                        'Content-Type': 'application/json',
                                    },
                                    data: {
                                        userId: this.userInfo.id,
                                        activityId: item.id
                                    },
                                    success: (res) => {
                                        // console.log(this.userId,"-- and --",this.activity.id )
                                        console.log(res);
                                        this.showBriefActivity();
                                        // uni.navigateTo({
                                        //     url: '/pages/fabu/more-activity/more-activity'
                                        // })
                                    }
                                })
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });

                }
            },
            goDetail(item) {
                uni.navigateTo({
                    url: '/pages/fabu/more-activity/baoming/baoming?id=' + item.id + "&tag=0"
                })
            }
        }
    };
</script>

<style>
    page {
        background-color: #eee;
    }

    /* 已选择 */
    .selde {
        border: 1px solid red;
        background: red;
        color: #FFFFFF;
        border-radius: 20upx;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 20upx;
        padding: 0 10upx;
    }

    .selde-q {
        width: 18upx;
        height: 18upx;
        border-radius: 50%;
        background: #FFFFFF;
        margin-left: 6upx;
    }

    /* 未选择 */
    .noselde {
        border: 1px solid #959595;
        background: #FFFFFF;
        color: #959595;
        border-radius: 20upx;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 20upx;
        padding: 0 10upx;
    }

    .noselde-q {
        border: 1px solid #959595;
        width: 16upx;
        height: 16upx;
        border-radius: 50%;
        background: #FFFFFF;
        margin-left: 6upx;
    }

    .list-box {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        margin: 0upx 16upx 16upx 16upx;
        padding: 16upx;
        border-radius: 10upx;
    }

    .list-ed {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .list-left {
        margin-right: 16upx;
    }

    .list-img {
        width: 160upx;
        height: 160upx;
        margin: 0upx 16upx 0upx 0upx;
    }

    .list-right {
        display: flex;
        flex-direction: column;
        width: 510upx;
        height: 180upx;
    }

    .list-right-img {
        width: 140upx;
        height: 38upx;
    }

    .noadsop {
        width: 120upx;
        height: 32upx;
    }

    .list-head {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10upx;
    }

    .list-name {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin-bottom: 10upx;
    }

    .list-da {
        display: flex;
        flex-direction: row;
        font-size: 26upx;
    }

    .list-da view {
        width: 50%;
    }

    .list-da view text {
        color: red;
    }

    .sure {
        background: #FF6000;
        color: #FFFFFF;
        width: 600upx;
        height: 70upx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 40upx;
        margin: 60upx auto;
    }
</style>